<template>
<!-- <div>
    <div id="echartsDemo" style="width: 800px;height:700px"></div>
</div> -->
<el-tabs type="border-card" >
  <el-tab-pane label="人事管理">
    <template >
        <div id="echartsDemo1" style="width: 800px;height:500px"></div>
    </template>
  </el-tab-pane>
  <el-tab-pane label="聊天信息管理">
     <template >
        <div id="echartsDemo2" style="width: 800px;height:500px"></div>
    </template>
  </el-tab-pane>
  </el-tabs>
    
    
</template>
<script>
 import {getAuthorityList} from '../../util/api.js'
  export default {
    data () {
      return {
          authorityList:[],
          token:''
        
      }
    },
    mounted()
    {
        //根据特定用户加载
            console.log(this.$route.query)
            this.authorityList=this.$route.query.authorityList
            console.log(this.authorityList)
            this.create_tree1()
            this.create_tree2()


    },
    methods: {
    
    init (){
      let elementById = document.getElementById('echartsDemo')
      let echartsDemo = this.$echarts.init(elementById)
      var data = {
        "name":"权限关系",
        "children":[
            {
                "name":"人事管理",
                "value":100,
                "children":[
                   {
                       "name":"管理员信息管理",
                       "value":110,
                       "children":[
                           {"name":"查看管理员信息","value":111},
                           {"name":"查看管理员权限","value":112},
                           {"name":"添加管理员","value":113},
                           {"name":"删除管理员","value":114},
                           {"name":"修改管理员权限","value":115},
                           {"name":"修改管理员信息","value":116},
                       ]
                   },
                   {
                       "name":"用户信息管理",
                       "value":120,
                       "children":[
                           {"name":"查看用户信息","value":121},
                           {"name":"删除用户信息","value":122},
                           {"name":"修改用户信息","value":123},
                           {"name":"查看用户群聊列表","value":124},
                           {"name":"查看用户好友列表","value":125},
                       ]
            
                   }
               ]

            },
        {
            "name": "聊天信息管理",
            "valeu":200,
             "children":[
                 {
                  "name": "聊天室信息管理",
                  "valeu":210,
                 "children":[   
                     {"name":"查看聊天室信息","value":211},
                     {"name":"删除聊天室","value":212},
                     {"name":"查看聊天室消息记录","value":213},
                     {"name":"修改聊天室信息","value":214},
                     {"name":"查看所有消息记录","value":215},
                 ]
                 },
                 {
                    "name":"系统消息管理",
                    "value":220,
                    "children":[
                        {"name":"发送信息","value":221},
                    ]
                 }
                ]
            }
            ],
        };
      let option = {
          tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',
                    id: 0,
                    name: 'tree1',
                    data: [this.authorityList[0]],
                    type: 'tree',
                   
                  
                    top: '10%',
                    left: '8%',
                    bottom: '22%',
                    right: '20%',

                    symbolSize: 7,

                    edgeShape: 'polyline',
                    edgeForkPosition: '63%',
                    initialTreeDepth: 3,
                   
                    lineStyle: {
                        width: 2
                    },
                    label: {
                        backgroundColor: '#fff',
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                    },

                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
            }
      echartsDemo.setOption(option)
    },
    create_tree1()
    {
        let elementById = document.getElementById('echartsDemo1')
        let echartsDemo1 = this.$echarts.init(elementById)

        //处理颜色 把false的地方都变灰 遍历一遍
      for(var i=0;i< this.authorityList[0].children.length;i++)
      {
          if(this.authorityList[0].children[i].state==false)
          {
              this.authorityList[0].children[i].lineStyle={
                color:"#0000ff",
                borderColor:"#0000ff"
            }
          }
        else{//还是true继续遍历
            for(var j=0;j< this.authorityList[0].children[i].children.length;j++)
            {
                if(this.authorityList[0].children[i].children[j].state==false)
                {
                     this.authorityList[0].children[i].children[j].lineStyle={
                        color:"#0000ff",
                        borderColor:"#0000ff"
                    }
                }
            }
        }
      }

        let option = {
          tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',
                    id: 0,
                    name: 'tree1',
                    data: [this.authorityList[0]],
                    top: '10%',
                    left: '8%',
                    bottom: '22%',
                    right: '20%',

                    symbolSize: 7,

                    edgeShape: 'polyline',
                    edgeForkPosition: '63%',
                    initialTreeDepth: 3,

                    lineStyle: {
                        width: 2
                    },

                    label: {
                        backgroundColor: '#fff',
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                    },

                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
            }
            echartsDemo1.setOption(option)
    },
    create_tree2()
    {
        let elementById = document.getElementById('echartsDemo2')
      let echartsDemo2 = this.$echarts.init(elementById)

      //处理颜色 把false的地方都变灰 遍历一遍
      for(var i=0;i< this.authorityList[1].children.length;i++)
      {
          if(this.authorityList[1].children[i].state==false)
          {
              this.authorityList[1].children[i].lineStyle={
                color:"#0000ff",
                borderColor:"#0000ff"
            }
          }
        else{//还是true继续遍历
            for(var j=0;j< this.authorityList[1].children[i].children.length;j++)
            {
                if(this.authorityList[1].children[i].children[j].state==false)
                {
                     this.authorityList[1].children[i].children[j].lineStyle={
                        color:"#0000ff",
                        borderColor:"#0000ff"
                    }
                }
            }
        }
      }
        let option = {
          tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',
                    id: 0,
                    name: 'tree1',
                    data: [this.authorityList[1]],
                    top: '10%',
                    left: '12%',
                    bottom: '22%',
                    right: '20%',

                    symbolSize: 7,

                    edgeShape: 'polyline',
                    edgeForkPosition: '63%',
                    initialTreeDepth: 3,

                    lineStyle: {
                        width: 2
                    },

                    label: {
                        backgroundColor: '#fff',
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                    },

                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
            }
            echartsDemo2.setOption(option)
    }
    }
  }
  
</script>

<style lang="less" scoped>

</style>